<script setup>

    const props = defineProps({
        list: {
            type: Array,
            default: []
        }
    })
    
    // let data = $ref([
    //     { name: '低保', numb: 246 },
    //     { name: '五保', numb: 246 },
    //     { name: '退役军人', numb: 246 },
    //     { name: '三类儿童', numb: 246 },
    //     { name: '高龄老人', numb: 246 },
    //     { name: '社区矫正', numb: 246 }
    // ])

    const emit = defineEmits(['clickSpecialItem'])

    const handleClick = (index) => {
        emit('clickSpecialItem', index)
    }

</script>

<template>
    <div class="special-crowd-wrap">
        <div class="card-title"><img src="../../../assets/images/card-title-icon-3.png">特殊人群</div>

        <div class="special-crowd-list flex">
            <div 
                class="item"
                v-for="(item, index) in props.list"
                :key="index"
                @click="handleClick(index)"
            >
                <div class="title">
                    {{ item.name }}
                </div>
                <div class="value">{{ item.numb }}</div>
            </div>
        </div>

    </div>
</template>

<style lang="less" scoped>
    .special-crowd-wrap{
        margin-top: 15px;

        .special-crowd-list{
            flex-wrap: wrap;

            .item{
                width: 124px;
                color: #fff;
                margin: 24px 8px 0;
                cursor: pointer;

                .title{
                    height: 26px;
                    line-height: 26px;
                    background: url('../../../assets/images/special-crowd-item.png') center no-repeat;
                    text-align: center;
                }

                .value{
                    height: 58px;
                    line-height: 58px;
                    font-size: 24px;
                    font-weight: bold;
                    margin-top: 5px;
                    background: rgba(36,82,171,0.43);
                    text-align: center;
                }
            }
        }
    }
</style>